<template>
    <div class="left">
        <div class="common">
            <div class="promptHeader">
                <div class="title"><img class="w-[24px] h-[24px]" :src="IconPrompt" />
                    <div class="titleText">提示词(Prompt)</div>
                </div>
                <div class="promatButtons">
                    <div class="promatButtonsText" @click="openGetFormatDialog">获取图片提示词</div>
                    <div class="promatButtonsText" @click="openStreamlinDialog">精简提示词</div>
                </div>
            </div>
            <l-textarea v-model="drawForm.prompt" maxlength="1024" :rows="6" :clearable="true" :show-word-limit="false"
                :contentStyle="{
                    width: '450px',
                    height: '77px',
                    fontFamily: 'PingFang SC, PingFang SC',
                    fontWeight: '400',
                    fontSize: '12px',
                    background: '#121318',
                    color: '#616772',
                    lineHeight: '14px'
                }" :customStyle="{
                    borderColor: '#000',
                    color: '#fff',
                    paddingBottom: '4px',
                    background: '#121318'

                }">
                <template #length-suffix>
                    <div class="length-suffix justify-end">
                        <el-button type="default" :link="true" class="ml-[10px]" :icon="Switch" :loading="isTranslate"
                            @click="translatePrompt()">

                        </el-button>
                        <el-button type="default" :link="true" class="ml-[10px]" :icon="CopyDocument"
                            @click="copyContent(promptValue)">

                        </el-button>
                        <el-button type="default" :link="true" class="ml-[10px]" :icon="Delete"
                            @click="promptValue = ''">

                        </el-button>
                    </div>
                </template>
            </l-textarea>
        </div>
        <div class="common ">
            <div class="referencePictureHeader">
                <div class="title">
                    <img class="w-[24px] h-[24px]" :src="IconPictureBase" />
                    <div class="titleText">参考图片</div>
                </div>
                <div class="extra">上传后将基于参考图片生成画作</div>
            </div>
            <upload class="w-full mt-[10px]" :show-progress="true" :data="{
                    type: 'draw'
                }" :limitSize="10" @success="(val) => (drawForm.imageBase = val.data.path)">
                <div class="flex flex-col items-center justify-center upload-view-box">
                    <template v-if="!drawForm.imageBase">
                        <el-icon style="margin-top: 10px" :size="40"><upload-filled /></el-icon>
                        <div style="margin-top:10px;width: 48px;height: 17px;font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 12px;color: #616772;line-height: 14px;text-align: left;font-style: normal;text-transform: none;"
                            class="mt-[6px]">上传图片</div>
                        <div
                            style="margin-top:7px;margin-bottom:15px;width: 158px;height: 14px;font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 10px;color: #616772;line-height: 12px;text-align: left;font-style: normal;text-transform: none;">
                            支持的文件类型jpg,png,webp</div>
                    </template>
                    <template v-else>
                        <el-image class="w-full h-[90px]" :src="drawForm.imageBase" fit="contain" />
                        <div class="upload-view-item">
                            <el-icon size="24" class="upload-clear" color="#ffffff"
                                @click.stop="drawForm.imageBase = ''">
                                <CircleCloseFilled />
                            </el-icon>
                            <el-button type="primary">重新上传</el-button>
                        </div>
                    </template>
                </div>
            </upload>
        </div>
        <div class="common random">
            <div class="referencePictureHeader">
                <div class="title">
                    <img class="w-[24px] h-[24px]" :src="IconSeed" />
                    <div class="titleText">随机种子</div>
                </div>
                <div class="extra randomExtra">填入后将使用seed对应的图片噪音生成画作</div>
            </div>
            <el-input-number controls-position="right" style="width:100%" v-model="drawForm.seed" />
        </div>
        <div class="divideLine">
            <div class="lineTitle">绘图设置</div>
            <div class="line"></div>
            <div class="EyeIcon">
                <template v-if="plotSetting === true">
                    <ElIcon :size="24">
                        <View @click="plotSetting = false" style="margin-left: 3px; color: #616772;cursor: pointer;" />
                    </ElIcon>
                </template>
                <template v-if="plotSetting === false">
                    <ElIcon :size="24">
                        <Hide @click="plotSetting = true" style="margin-left: 3px; color: #616772;cursor: pointer;" />
                    </ElIcon>
                </template>
            </div>
        </div>
        <template v-if="plotSetting === true">

            <div class="common modelVersion">
                <!-- <div class="referencePictureHeader">
                    <div class="title">
                        <img class="w-[24px] h-[24px]" :src="IconModel" />
                        <div class="titleText">模型版本(Version)</div>
                    </div>

                </div>
                <el-select v-model="drawForm.version" class="versionSelect" style="width: 438px;">
                    <el-option class="versionOption" v-for="item in versionOptions" :key="item.value"
                        :label="item.label" :value="item.value" />
                </el-select> -->
                <model-picker v-model="drawForm"></model-picker>
            </div>
            <div class="common">
                <div class="referencePictureHeader">
                    <div class="title">
                        <img class="w-[24px] h-[24px]" :src="IconQuality" />
                        <div class="titleText">质量等级(Quality)</div>
                    </div>
                    <div v-if="drawForm.quality" class="extra stylizedLevelsExtra">Quality的参数为{{ drawForm.quality }}
                    </div>
                </div>
                <div class="flex flex-wrap gap-4">
                    <el-card @click="selectCard('qualityOptions', item)" v-for="item in qualityOptions"
                        :key="item.value" :class="item.selected ? 'card selected' : 'card'">
                        <div class="cardTitle"> {{ item.title }}</div>
                        <div class="cardIntro"> 参数 --q {{ item.info }}</div>
                    </el-card>
                </div>

            </div>
            <div class="common">
                <div class="referencePictureHeader">
                    <div class="title">
                        <img class="w-[24px] h-[24px]" :src="IconStylize" />
                        <div class="stylizedLevels ">风格化等级(Stylize)</div>
                    </div>
                    <div v-if="drawForm.stylize" class="extra stylizedLevelsExtra">Stylize的参数为{{ drawForm.stylize }}
                    </div>
                </div>
                <div class="flex flex-wrap gap-4">
                    <el-card @click="selectCard('styleLevelOptions', item)" v-for="item in styleLevelOptions"
                        :key="item.value" :class="item.selected ? 'card selected' : 'card'">
                        <div class="cardTitle"> {{ item.title }}</div>
                        <div class="cardIntro"> 参数 --s {{ item.info }}</div>
                    </el-card>
                </div>

            </div>
            <!-- <div class="common stylizedMethod">
                <div class="referencePictureHeader">
                    <div class="title">
                        <img class="w-[24px] h-[24px]" :src="IconStyle" />
                        <div class="titleText">风格模式(Style)</div>
                    </div>
                    <div v-if="drawForm.style === 'default'" class="extra stylizedLevelsExtra">style无参数</div>
                    <div v-else-if="drawForm.style" class="extra stylizedLevelsExtra">style的参数为{{ drawForm.style }}
                    </div>
                </div>
                <div class="flex flex-wrap gap-4">
                    <el-card @click="selectCard('styleOptions', item)" v-for="item in styleOptions" :key="item.value"
                        :class="item.selected ? 'card selected' : 'card'">
                        <div class="cardTitle"> {{ item.title }}</div>
                        <div class="cardIntro"> {{ item.info }}</div>
                    </el-card>
                </div>

            </div> -->
        </template>
        <div class="create">
            <div class="startCreateButton">
                <el-button type="primary" @click="onDrawing" class="startCreateText">马上创作<ElIcon :size="24">
                        <Right style="margin-left: 3px; color: #FFFFFF;" />
                    </ElIcon></el-button>

            </div>
        </div>
        <el-dialog modal-class="pictureTipDialog" :show-close="false" v-model="pictureTipVisible" width="600">
            <template #header>
                <div class="pictureTipDialogheader">
                    <div class="pictureTipDialogtitle">
                        <img class="w-[24px] h-[24px]" :src="IconPrompt" />
                        <div class="pictureTipDialogMaintitle">获取图片提示词</div>
                        <div class="pictureTipDialogSecondarytitle">/describe</div>
                    </div>
                    <ElIcon @click="pictureTipVisible = false" :size="24">
                        <Close style="margin-left: 3px;color:#F86E07;" />
                    </ElIcon>
                </div>
            </template>
            <div>
                <div>上传需要获取提示词的图片后生成描述</div>
                <div class="pictureTipDialogUpload">
                    <upload class="w-full mt-[0px]" :show-progress="true" :data="{
                    type: 'draw'
                }" :limitSize="10" @success="(val) => (picTipValue = val.data.path)">
                        <div class="flex flex-col items-center justify-center upload-view-box">
                            <template v-if="!picTipValue">
                                <el-icon style="margin-top: 10px" :size="40"><upload-filled /></el-icon>
                                <div style="margin-top:10px;width: 48px;height: 17px;font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 12px;color: #616772;line-height: 14px;text-align: left;font-style: normal;text-transform: none;"
                                    class="mt-[6px]">上传图片</div>
                                <div
                                    style="margin-top:7px;margin-bottom:15px;width: 158px;height: 14px;font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 10px;color: #616772;line-height: 12px;text-align: left;font-style: normal;text-transform: none;">
                                    支持的文件类型jpg,png,webp</div>
                            </template>
                            <template v-else>
                                <el-image class="w-full h-[90px]" :src="picTipValue" fit="contain" />
                                <div class="upload-view-item">
                                    <el-icon size="24" class="upload-clear" color="#ffffff"
                                        @click.stop="picTipValue = ''">
                                        <CircleCloseFilled />
                                    </el-icon>
                                    <el-button type="primary">重新上传</el-button>
                                </div>
                            </template>
                        </div>
                    </upload>
                </div>

                <div>
                    <el-button style="width: 100%;margin-top: 10px;background: #F86E07;border: none;"
                        :loading="getSDTaggerButtonLoading" type="primary" @click="getSDTagger">生成描述</el-button>
                </div>

                <div class="pictureTipDescription">
                    <l-textarea v-model="promptValue" maxlength="1024" :rows="6" :clearable="true"
                        :show-word-limit="false" :contentStyle="{
                    width: '570px',
                    height: '77px',
                    fontFamily: 'PingFang SC, PingFang SC',
                    fontWeight: '400',
                    fontSize: '12px',
                    background: '#121318',
                    color: '#616772',
                    lineHeight: '14px'
                }" :customStyle="{
                    borderColor: '#000',
                    color: '#fff',
                    paddingBottom: '4px',
                    background: '#121318'
                }">
                    </l-textarea>

                </div>
                <div class="mt-[6px]">
                    <el-button @click="finishTagger"
                        style="width: 100%;margin-top: 10px;background: #41444E;border: none;font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 14px;color: #FFFFFF;line-height: 16px;text-align: left;font-style: normal;text-transform: none;"
                        type="default">完成</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog modal-class="pictureTipDialog" :show-close="false" v-model="streamlineVisible" width="600">
            <template #header>
                <div class="pictureTipDialogheader">
                    <div class="pictureTipDialogtitle">
                        <img class="w-[24px] h-[24px]" :src="IconPrompt" />
                        <div class="pictureTipDialogMaintitle">精简提示词</div>
                        <div class="pictureTipDialogSecondarytitle">/shorten</div>
                    </div>
                    <ElIcon @click="streamlineVisible = false" :size="24">
                        <Close style="margin-left: 3px;color:#F86E07;" />
                    </ElIcon>
                </div>
            </template>
            <div>
                <div>填写需要精简的提示词</div>
                <div class="pictureTipDialogUpload">
                    <l-textarea v-model="drawForm.prompt" maxlength="1024" :rows="6" :clearable="true"
                        :show-word-limit="false" :contentStyle="{
                    width: '570px',
                    height: '77px',
                    fontFamily: 'PingFang SC, PingFang SC',
                    fontWeight: '400',
                    fontSize: '12px',
                    background: '#121318',
                    color: '#616772',
                    lineHeight: '14px'
                }" :customStyle="{
                    borderColor: '#000',
                    color: '#fff',
                    paddingBottom: '4px',
                    background: '#121318'
                }" placeholder="请填写提示词">
                    </l-textarea>

                </div>

                <div>
                    <el-button style="width: 100%;margin-top: 10px;background: #F86E07;border: none;" type="primary"
                        @click="streamline">进行精简</el-button>
                </div>

            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { Delete, Switch, CopyDocument, CircleCloseFilled, UploadFilled, View, Hide, Right, Close } from '@element-plus/icons-vue'
import IconPrompt from '@/assets/images/drawing/icon_prompt.png'
import IconPictureBase from '@/assets/images/icon_picture_base.png'
import IconSeed from '@/assets/images/icon_seed.png'
import IconStyle from '@/assets/images/icon_style.png'
import IconStylize from '@/assets/images/icon_stylize.png'
import IconQuality from '@/assets/images/icon_quality.png'
import LTextarea from '~/components/l-textarea/index.vue'
import { useLockFn } from '~/composables/useLockFn'
import  modelPicker  from '~/pages/app/drawing/component/drawing-control/model-picker.vue'
import { keywordPromptTranslate } from '~/api/drawing'

import Upload from '~/components/upload/index.vue'
import { ElIcon } from 'element-plus'
import { useUserStore } from '~/stores/user';
import { drawGetSDTagger, drawStreamline } from '~/api/drawing'
const userStore = useUserStore();
const { isLogin, toggleShowLogin } = userStore;
const props = defineProps({
    promptProp: {
        type: String,
        default: '',
    },
    value: {
        type: String,
        default: '',
    }
})
const emit = defineEmits(['create', 'setValue'])
//提示词
const promptValue = ref('')
const pictureTipVisible = ref(false)
// 请求翻译
const { isLock: isTranslate, lockFn: translatePrompt } = useLockFn(async () => {
    try {
        if (promptValue.value.trim() == '') {
            feedback.msgError('请输入描述词')
            return
        }
        const { promptEn } = await keywordPromptTranslate({
            prompt: promptValue.value
        })
        promptValue.value = promptEn
    } catch (error) {
        console.log('翻译失败=>', error)
    }
})
//复制文本
const { copy } = useCopy()
const copyContent = async (content: string) => {
    await copy(content)
}
const picTipValue = ref(null as any)
const versionOptions = [
    {
        value: '--v 5.2',
        label: '5.2',
    }
]

//绘图设置
const plotSetting = ref(false)
const getSDTaggerButtonLoading = ref(false)
//获取图片提示词
const openGetFormatDialog = () =>{
    if (!isLogin) {
        toggleShowLogin();
        return
    }
    pictureTipVisible.value = true
}
const getSDTagger = async () => {
    if (!picTipValue.value) {
        feedback.msgError('请先上传图片')
        return
    }
    try {
        getSDTaggerButtonLoading.value = true
        const data = await drawGetSDTagger({ image: picTipValue?._value })
        getSDTaggerButtonLoading.value = false
        let content = ''
        for (const i in JSON.parse(data).caption) {
            if (content) {
                content = content + ' ' + i
            } else {
                content += i
            }

        }
        promptValue.value = content

    } catch (error) {
        console.log('失败', error)
        getSDTaggerButtonLoading.value = false
    }
}
const streamlineVisible = ref(false)
//精简提示词
const openStreamlinDialog = () =>{
    if (!isLogin) {
        toggleShowLogin();
        return
    }
    streamlineVisible.value = true
}
const streamline = async () => {
    if (!drawForm.prompt) {
        feedback.msgError('请先填写提示词')
        return
    }
    try {
        const data = await drawStreamline({ prompt: drawForm.prompt })
        drawForm.prompt = data.prompt
        feedback.msgSuccess('获取成功')

    } catch (error) {
        console.log('失败', error)

    }
}


enum DrawModeEnum {
    SD = 'sd',
    YJ_SD = 'yijianai',
    MDD_MJ = 'mddai_mj',
    ZSY_MJ_FAST = 'zhishuyun_fast',
    ZSY_MJ_RELAX = 'zhishuyun_relax',
    DALLE3 = 'dalle3'
}
import type { DrawingFormType } from '~/api/drawing'
import { useConfigEffect, yjData, sdData } from '~/pages/drawing/hooks/useConfigEffect'
type DrawingHandlerType = (options: {
    drawing: DrawingFormType
    isClear: boolean
}) => void

const drawForm = inject<DrawingFormType>('drawForm')
const drawingHandler = inject<DrawingHandlerType>('drawingHandler')

if (props?.promptProp) {
    drawForm.prompt = props.promptProp
}
watch(
    () => drawForm.model,
    (value) => {
        if (value === DrawModeEnum.SD) {
            drawForm.scale = '1024x1024'
            useConfigEffect().getSdData()
        } else if (value === DrawModeEnum.YJ_SD) {
            drawForm.scale = '2'
            drawForm.style = 'default'
            useConfigEffect().getYjSdData()
        } else if (value === DrawModeEnum.DALLE3) {
            drawForm.scale = '1024x1024'
            drawForm.style = 'vivid'
        } else {
            drawForm.style = 'default'
            drawForm.scale = '1:1'
        }
    },
    { deep: false, immediate: false }
)
const draw = () =>{
    if (!isLogin) {
        toggleShowLogin();
        return
    }
    drawForm.action = 'generate'
    drawForm.model = 'mddai_mj'
    drawingHandler({ drawing: JSON.parse(props.value), isClear: true })  
}
const onDrawing = () => {
    if (!isLogin) {
        toggleShowLogin();
        return
    }
    drawForm.action = 'generate'
    drawForm.model = 'mddai_mj'
    if (drawForm.prompt) {
        emit('create')
        emit('setValue', JSON.stringify(drawForm))
    }
    drawingHandler({ drawing: drawForm, isClear: true })
}
const selectCard = (optionsName: string, item: any) => {
    if (optionsName === 'qualityOptions') {
        if (!item.selected) {
            qualityOptions.value.forEach((i) => {
                if (i.value === item.value) {
                    i.selected = true
                } else {
                    i.selected = false
                }
            })
        }
        drawForm.quality = item.value
    } else if (optionsName === 'styleLevelOptions') {
        if (!item.selected) {
            styleLevelOptions.value.forEach((i) => {
                if (i.value === item.value) {
                    i.selected = true
                } else {
                    i.selected = false
                }
            })
        }
        drawForm.stylize = item.value
    } else {
        if (!item.selected) {
            styleOptions.value.forEach((i) => {
                if (i.value === item.value) {
                    i.selected = true
                } else {
                    i.selected = false
                }
            })
        }
        drawForm.style = item.value
    }


}
const qualityOptions = ref([
    { title: '超低质量', info: '.25', value: 0.25, selected: false },
    { title: '低质量', info: '.5', value: 0.5, selected: false },
    { title: '标准质量', info: '.1', value: 1, selected: false }
])
const styleLevelOptions = ref([
    { title: '低', info: '50', value: 50, selected: false },
    { title: '中等', info: '100', value: 100, selected: false },
    { title: '高', info: '250', value: 250, selected: false },
    { title: '超高', info: '750', value: 750, selected: false }
])
const styleOptions = ref([
    { title: '默认', info: '无参数', value: 'default', selected: true },
    { title: '原始', info: '参数 --style raw', value: 'raw', selected: false },
])

const finishTagger = () => {
    drawForm.prompt = promptValue.value
    pictureTipVisible.value = false
    promptValue.value = ''
}
defineExpose({
    draw
});
</script>
<style lang="scss" scoped>
.left {

    min-width: 501px;
    height: 1119px;
    border-radius: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;


    .promptHeader {
        display: flex;
        justify-content: space-between;
        margin-bottom: 9px;
        font-size: 14px;
    }

    .title {
        display: flex;
        align-items: center;

        .titleText {
            //width: 118px;
            height: 20px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }


    }

    .promatButtons {
        width: 300px;
        height: 25px;
        border-radius: 4px 4px 4px 4px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;

        .promatButtonsText {
            cursor: pointer;
            margin-left: 10px;
            padding: 4px 7px;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #8B8E92;
            // width: 75px;
            // height: 17px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #8B8E92;
            line-height: 12px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .referencePictureHeader {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #fff;
        margin-bottom: 10px;

        .extra {
            margin-left: 7px;
            //width: 140px;
            height: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #616772;
            line-height: 12px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .randomExtra {
            width: 200px;
        }

        .stylizedLevelsExtra {
            //  width: 200px;
            margin-left: 8px;
        }

    }

    .divideLine {
        display: flex;
        width: 460px;
        height: 33px;
        border-radius: 0px 0px 0px 0px;
        align-items: center;
        justify-content: space-between;

        .lineTitle {
            width: 48px;
            height: 17px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #616772;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .line {
            width: 370px;
            height: 1px;
            background-color: #616772;
        }
    }

}

:deep(.el-select-dropdown) {
    background: #262932;
}

//提示
.length-suffix {
    position: absolute;
    bottom: 0;
    left: 0px;
    font-size: 14px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    background: '#121318';

}

// 上传参考图
.upload-view-box {
    position: relative;
    width: 428px;
    height: 124px;
    border-radius: 8px 8px 8px 8px;
    border-right: 4px;
    border: 1px dashed #dcdfe6;

    .upload-view-item {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .upload-clear {
        position: absolute;
        right: 20px;
        top: 14px;
        cursor: pointer;
    }
}

.upload-view-box:hover .upload-view-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.common {
    width: 460px;
    //height: 180px;
    background: #262932;
    border-radius: 8px 8px 8px 8px;
    padding: 10px;
    margin-bottom: 20px;
}

.random {
    height: 90px;
    margin-bottom: 10px;

    // :deep(.el-input__wrapper) {
    //     background-color: rgba(0, 0, 0, 0.3) !important;

    // }
}
.modelVersion{
    padding: 0px 10px 10px 10px;
    //height: 220px;
}
.create {
    margin-top: 10px;
    width: 460px;
    //height: 180px;
    border-radius: 8px 8px 8px 8px;
    //margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .startCreateButton {

        cursor: pointer;
        width: 100%;
        height: 41px;
        // background: #F86E07;
        border-radius: 8px 8px 8px 8px;
        display: flex;
        justify-content: center;
        align-items: center;

        .startCreateText {
            width: 100%;
            height: 41px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 19px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }
}

.stylizedMethod {
    margin-bottom: 0px;
}

.common {


    .card {
        cursor: pointer;
        width: 206px;
        height: 48px;
        background: #363A46;
        border: none;

        // box-shadow: 0px 0px 6px 0px rgba(248, 110, 7, 0.5);
        border-radius: 4px 4px 4px 4px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .cardTitle {

            //width: 48px;
            height: 17px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 14px;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }

        .cardIntro {
            //width: 55px;
            height: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #8B8E92;
            line-height: 12px;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }

    .card:hover {
        background-color: #F86E07;

        .cardIntro {
            color: #fff
        }
    }

    .selected {
        background-color: #F86E07;

        .cardIntro {
            color: #fff
        }
    }
}

.versionOption {
    color: #ffffff;
}

.versionOption:hover {
    color: #F86E07;
}

.pictureTipDialog {
    width: 600px;
    height: 550px;
    background: #262932;
    border-radius: 6px 6px 6px 6px;
}

.pictureTipDialogheader {
    background: #262932;
    display: flex;
    justify-content: space-between;

    .pictureTipDialogtitle {
        display: flex;
        align-items: center;

        .pictureTipDialogMaintitle {
            //width: 98px;
            height: 20px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .pictureTipDialogSecondarytitle {
            //width: 44px;
            margin-left: 5px;
            height: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #616772;
            line-height: 12px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }


    }
}

.pictureTipDialogUpload {
    margin-top: 10px;
    //width: 550px;
    //height: 240px;
    border-radius: 8px 8px 8px 8px;

    .upload-view-box {
        width: 100%;
        height: 240px;
    }
}

.pictureTipDescription {
    margin-top: 10px;
}
</style>